<template>
	<view v-if="pageShow">
		<!-- 海报 -->
		<u-popup :show="hbshow" @close="hbclose" mode="center">
			<view class="mainpadding">
				<view class="flexleft">
					<view class="quxiaobtn flexcenter margin_right5">取消</view>
					<view class="baocbtn flexcenter">保存图片</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 180rpx;">
			<!-- 轮播 -->
			<view class="mainpadding" @click="jumpdetail('/pages_shouye/mendianxq?id=',dataAll.shop.id)">
				<view class="flexleft">
					<image class="listleftimg hearradius margin_right2" :src="dataAll.shop.logo_text" mode=""></image>
					<view class="flexcolumnbet lalalbox" style="height: 120rpx;width: 100%;">
						<view class="sanshier hei_text bold">{{dataAll.shop.name}}</view>
						<view class="flexleft">
							<view class="flexcolumn" style="margin-right: 100rpx;">
								<text class="sanshier hei_text bold ">{{dataAll.shop.star}}分</text>
								<u-rate :count="5" v-model="dataAll.shop.star" allowHalf gutter="0" readonly ></u-rate>
							</view>
							<view class="">
								<view class="smalltext hei_text margin_right">营业时间：{{dataAll.shop.yysj}}</view>
								<view class="smalltext hei_text margin_right">浏览数：{{dataAll.shop.view_num}}  关注：{{dataAll.shop.gz_num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="margin_top flexleft">
					<view class="flexleft margin_right" @click="callphone(dataAll.shop.tel)">
						<u-icon name="phone" color="#999" size="16"></u-icon>
						<text class="xiaohui ershil margin_left1">{{dataAll.shop.tel}}</text>
					</view>
					<view class="flexleft" @click.stop="openlocation">
						<u-icon name="map" color="#999" size="16"></u-icon>
						<text class="xiaohui ershil margin_left1">{{dataAll.shop.address_detail}}</text>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="fxbtn flexcenter" @click.stop="tzlqyhq(dataAll.shop.id)">优惠券</view>
					<view class="fxbtn flexcenter" @click.stop="gz_fn(dataAll.shop.id)">{{dataAll.shop.is_gz?"取消关注":"关注门店"}}</view>
					<!-- <button open-type="share" hover-class="none">
						<view class="fxbtn flexcenter">分享门店</view>
					</button> -->
				</view>
			</view>
			<u-swiper height="375" :list="dataAll.list1"
				radius="0" indicator circular :autoplay="false"></u-swiper>
			<!-- 商品信息 -->
			<view class="mainpadding ffffff margin_top">
				<view class="hongbox flexbetween mainpadding" style="align-items: flex-end;">
					<view class="flexleft"  style="align-items: flex-end;">
						<view class="flexcolumn margin-right">
							<view class="xiaohong sanshier bold" v-if="goods_attr==1"><text style="font-size: 16rpx;">￥</text>{{dataAll.goodsprice.price}}</view>
							<view class="xiaohong sanshier bold" v-if="goods_attr==2">￥{{dataAll.goodsprice.pt_price}}</view>
							<view class="xiaohong sanshier bold" v-if="goods_attr==3">￥{{dataAll.goodsprice.ms_price}}</view>
							<view class="xiaohui strongtext margin_top">已售:{{dataAll.sales}}</view>
						</view>
						<view class="">
							<view class="xiaohei strongtext " v-show="Number(dataAll.goodsprice.score_price)">积分抵扣￥{{dataAll.goodsprice.score_price}}</view>
							<view class="xiaohei strongtext " v-show="Number(dataAll.sdyh_price)">首单优惠￥{{dataAll.sdyh_price}}</view>
							<view class="xiaohei strongtext " v-show="Number(dataAll.activity_price)">活动优惠￥{{dataAll.activity_price}}</view>
						</view>
					</view>
					<view class="flexright">
						<view class="flexcolumn margin_right" @click="sc_fn(listid)">
							<!-- 未收藏 -->
							<u-icon name="star" color="#666666" size="24" v-if="dataAll.is_collect==0"></u-icon>
							<!-- 已收藏 -->
							<u-icon name="star-fill" color="#FF9341" size="24" v-if="dataAll.is_collect==1"></u-icon>
							<view class="smalltext xiaohei">收藏</view>
						</view>
						
						<button open-type="share" hover-class="none">
							<view class="flexcolumn margin_right">
								<u-icon name="share-square" color="#666666" size="24"></u-icon>
								<view class="smalltext xiaohei">分享</view>
							</view>
						</button>
						<view class="flexcolumn"  @click="tzlqyhq(dataAll.shop.id)">
							<u-icon name="coupon" color="#666666" size="24"></u-icon>
							<view class="smalltext xiaohei">领券</view>
						</view>
					</view>
				</view>
				<view class="sanshier xiaohei margin_top">{{dataAll.title}}</view>
				
				<!-- <view class="flexleft margin_top">
					<view class="fenbox margin_right1" v-show="Number(dataAll.goodsprice.score_price)">积分抵扣￥{{dataAll.goodsprice.score_price}}</view>
					<view class="huangbox margin_right1" v-show="Number(dataAll.sdyh_price)">首单优惠￥{{dataAll.sdyh_price}}</view>
					<view class="fenbox" v-show="Number(dataAll.activity_price)">活动优惠￥{{dataAll.activity_price}}</view>
				</view>
				<view class="margin_top ershiba xiaohong fonweight">￥
					<text class=" ershiba xiaohong fonweight" style="font-size: 48rpx;"
						v-if="goods_attr==1">{{dataAll.goodsprice.price}}</text>
					<text class=" ershiba xiaohong fonweight" style="font-size: 48rpx;"
						v-if="goods_attr==2">{{dataAll.goodsprice.pt_price}}</text>
					<text class=" ershiba xiaohong fonweight" style="font-size: 48rpx;"
						v-if="goods_attr==3">{{dataAll.goodsprice.ms_price}}</text>
				</view> -->
			</view>
			<view class="shangjiatuijian" v-if="goodsList.length">
				<view class="titletext hei_text bold">商家推荐</view>
				<view class="flexleft flex-wrap ">
					<view class="flexcenter sanshis margin_top1" v-for="item in goodsList" :key="item.id" @click="tzspxq(item.id,item.goods_attr)">
						<view class="">
							<image :src="item.image_text" mode=""></image>
							<view class="main_size hei_text bold xiankuan" style="width: 200rpx;">{{item.title}}</view>
							<view class="xiaohong sanshier bold" v-if="item.goods_attr==1">￥{{item.goodsprice.price}}
							</view>
							<view class="xiaohong sanshier bold" v-if="item.goods_attr==2">
								￥{{item.goodsprice.pt_price}}</view>
							<view class="xiaohong sanshier bold" v-if="item.goods_attr==3">
								￥{{item.goodsprice.ms_price}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="mainpadding2" v-if="goods_attr==2 && ptList.length">
				<view class="mainpadding ffffff radius margin_top" style="box-sizing: border-box;">
					<view class="flexbetween" @click="ptshow = true">
						<view class="sanshier xiaohei">这些人已拼，参与可立即拼成</view>
						<view class="flexright">
							<view class="ershil xiaocheng margin_right1">查看全部</view>
							<u-icon name="arrow-right" color="#FF9341"></u-icon>
						</view>
					</view>
					<view class="xiahuaxian margin_top flexbetween" v-for="(item,index) in ptList" :key="item.id" v-if="index==0 || index==1">
						<view class="flexleft">
							<view class="dingwei margin_right5">
								<image  v-if="ind==0 || ind==1" v-for="(ite,ind)  in item.groupuser" :key="ite.id" class="touxiags" :src="ite.user.avatar_text" mode="">
								</image>
							</view>
							<view class="flexleft">
								<view class="titletext zhonghei margin_right1 yhxk" v-for="ite in item.groupuser" :key="ite.id" >{{ite.user.nickname}}</view>
							</view>
						</view>
						<view class="xhtbn flexcenter" @click="buy_type=3;wanlshop_group_id=item.id;show=true">去拼单</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="ffffff mainpadding radius margin_top">
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in navList" :key="index">
						<view :class="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="" v-if="isActive==0">
					<u-parse :content="dataAll.content"></u-parse>
				</view>
				<view class="" v-if="isActive==1">
					<u-parse :content="dataAll.buy_xz"></u-parse>
				</view>
				<view class="" v-if="isActive==2">
					
					<view class="" v-for="(item,index) in list.data" :key="item.id" v-if="index==0">
						<view class="flexbetween">
							<view class="flexleft">
								<image class="touxiag margin_right2" :src="item.user.avatar_text" mode=""></image>
								<view class="">
									<view class="zhonghei sanshier ">{{item.user.nickname}}</view>
									<view class="xiaohui ershil margin_top1 ">{{item.createtime_text}}</view>
								</view>
							</view>
							<u-rate :value="item.star" activeColor="#ff9341" readonly></u-rate>
						</view>
						<view class="xiaohui ershiba margin_top">{{item.content}}</view>
						<template v-if="item.video_url_text">
							<video class="scyyzz margin_top" :id="'video'+index" :src="item.video_url_text"
								@play="videoplay(index)"></video>
						</template>
						<view class="flexleft flex_wrap pdl">
							<view class="flexcenter tpbox " v-for="(ite,ind) in item.images_text" :key="ind">
								<view class="tjtp">
									<image class="" :src="ite" mode="" @click="lbtpriview(ind,item.images_text)"></image>
								</view>
							</view>
					
						</view>
						<view class="huibox margin_top mainpadding" v-if="item.reply_content">
							<view class="xiaohui ershiba">商家回复：
								<text class="xiaohei ershiba">{{item.reply_content}}</text>
							</view>
						</view>
						<view class="huibox margin_top mainpadding" v-if="item.zp_content">
							<view class="xiaohui ershiba">追评：
								<text class="xiaohei ershiba">{{item.zp_content}}</text>
							</view>
						</view>
					</view>
					<view class="flexleft margin_top" v-if="list.data.length" @click="jumper('/pages_lianmengsc/quanbupj?type=1&id=',listid)">
						<view class="xiaocheng ershiba margin_right1 ">查看全部评价</view>
						<u-icon name="arrow-right" color="#FF9341"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding flexbetween" v-if="goods_attr==1">
			<view class="flexleft">
				<view class="margin_right flexcolumn" @click="jumpdetail('/pages_shouye/mendianxq?id=',dataAll.shop.id)">
					<!-- <u-icon name="star" color="#666666" size="28"></u-icon>  -->
					<image class="spxqicon" src="../static/images/system/spxq1.png" mode=""></image>
					<view class="zhonghei ershil margin_top1 ">店铺</view>
				</view>
				<view class="margin_right flexcolumn" @click="contactkf('shop'+dataAll.shop_id,'2')">
					<image class="spxqicon" src="../static/images/system/spxq2.png" mode=""></image>
					<view class="zhonghei ershil margin_top1 ">客服</view>
				</view>
				<view class="flexcolumn"  @click="gowuche">
					<image class="spxqicon" src="../static/images/system/spxq3.png" mode=""></image>
					<view class="zhonghei ershil margin_top1 ">购物车</view>
				</view>
			</view>
			<view class="flexleft">
				<view class="jrbtn flexcenter margin_right" @click="buytype(0)">加入购物车</view>
				<view class="lbtn flexcenter" @click="buytype(1)">立即购买</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding" v-if="goods_attr==2">
			<view class="ptbox flexbetween">
				<view class="" @click="buytype(2)">
					<view class="sanshier fonweight" style="color:#A73A20;">￥{{dataAll.goodsprice.price}}</view>
					<view class="smalltext textcenter" style="color:#A73A20;">单独购买</view>
				</view>
				<view class="" @click="buytype(3)">
					<view class="sanshier fonweight xiaobai">￥{{dataAll.goodsprice.pt_price}}</view>
					<view class="smalltext xiaobai textcenter">发起拼团</view>
				</view>

			</view>
		</view>
		<view class="gudingdb ffffff mainpadding" v-if="goods_attr==3">
			<view class="bigbtn margin_top6" @click="buytype(4)">立即秒杀</view>
		</view>
		<!-- 购物车 -->
		<!-- <view class="gwbox flexcenter">
			<view class="dingwei">
				<view class="">
					<u-icon name="shopping-cart" color="#000000" size="28"></u-icon>
				</view>
				<view class="shuz flexcenter">10</view>
			</view>
		</view> -->
		<!-- 规格 -->
		<u-popup :show="show" @close="show=false">
			<view class="mainpadding ffffff">
				<view class="flexleft">
					<image class="biejt margin_right2" :src="dataAll.image_text" mode=""></image>
					<view class="">
						<view class="bigtext fonweight xiaocheng " v-if="price!=''">¥{{price}}</view>
						<view class="ershil fonweight xiaohui margin_top" v-if="stock!=''">库存：{{stock}}</view>
					</view>
				</view>
				<template v-if="dataAll.spu.length">
					<view class="margin_top" v-for="item in dataAll.spu" :key="item.id">
						<view class="ershil fonweight xiaohei">{{item.name}}</view>
						<view class="flexleft flex_wrap">
							<view
								:class="item.selecttext==ite?'yxbtn margin_top margin_right2':'wxbtn margin_top margin_right2'"
								v-for="(ite) in item.item" :key="ite" @click="checkgg(item,ite)">{{ite}}</view>
						</view>
					</view>
				</template>
				<view class="flexbetween margin_top">
					<view class="titletext ">购买数量</view>
					<u-number-box button-size="36" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
						v-model="buynumber"></u-number-box>
				</view>
				<!-- <view class="bigbtn margin_top6" @click="tzqrdd">确定</view> -->
				<view class="bigbtn margin_top6" v-if="goods_attr==1" @click="ggclose">{{buy_type==0?"加入购物车":"立即购买"}}
				</view>
				<view class="bigbtn margin_top6" v-if="goods_attr==2" @click="ggclose">{{buy_type==2?"单独购买":"发起拼团"}}
				</view>
				<view class="bigbtn margin_top6" v-if="goods_attr==3" @click="ggclose">立即秒杀</view>
			</view>
		</u-popup>
		<u-popup :show="ptshow" @close="ptshow=false" mode="center" :closeable="true">
			<view class="mainpadding ffffff radius" style="padding-bottom: 50rpx;min-width: 600rpx;">
				<view class="sishi zhonghei fonweight textcenter">可参与的拼单</view>
				<view class="" style="height: 500rpx;overflow: auto;">
					<view class="xiahuaxian margin_top flexbetween" v-for="(item,index) in ptList" :key="item.id" >
						<view class="flexleft">
							<view class="dingwei margin_right5">
								<image  v-if="ind==0 || ind==1" v-for="(ite,ind)  in item.groupuser" :key="ite.id" class="touxiags" :src="ite.user.avatar_text" mode="">
								</image>
							</view>
							<view class="flexleft">
								<view class="titletext zhonghei margin_right1 yhxk" v-for="ite in item.groupuser" :key="ite.id" >{{ite.user.nickname}}</view>
							</view>
						</view>
						<view class="xhtbn flexcenter" @click="buy_type=3;wanlshop_group_id=item.id;show=true">去拼单</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// goods_attr 1普通商品，2拼团，3秒杀
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				hbshow: false,
				isActive: 0,
				navList: [{
					index: 0,
					title: '商品详情'
				}, {
					index: 1,
					title: "购买须知"
				}, {
					index: 1,
					title: "评价列表"
				}],
				pageShow: false,
				page: 1,
				list: {
					data: []
				},
				listid: "",
				dataAll: {},
				buynumber: 1,
				ggshow: false,
				price: "", //规格弹框价格
				stock: "", //库存
				sku_id: "",
				guigeflag: false, //是否选择规格
				buy_type: 0, //0加购，1购买，2单独购买，3拼团购买，4秒杀
				goods_attr: 1, //1普通商品，2拼团，3秒杀
				ptshow: false,
				wanlshop_group_id: "", //参加拼团的id
				ptList:[],//拼团列表
				goodsList:[],
			}
		},
		onLoad(options) {
			this.goods_attr = options.attr
			this.listid = options.id
			if(options.code){
				uni.setStorageSync("invite_code",options.code)
			}
			if(options.ptid){
				this.wanlshop_group_id = options.ptid
				this.buy_type = 3
				this.show = true
			}
			this.getDetail()
			
			
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "喜嘟来",
				path: "pages_lianmengsc/shangpxq?code=" + uni.getStorageSync("myinvite_code")+"&id="+_this.listid+"&attr="+_this.goods_attr,
			}
		},
		onShow() {
			if(this.goods_attr==2){
				this.getptlist()
			}
			if (httpRequest.checkIsLogin()) {
				this.init()
			}
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							if (this.goods_attr == 1) {
								this.price = item.price //价格赋值
							} else if (this.goods_attr == 2) {
								if(this.buy_type==2){
									this.price = item.price //价格赋值
								}else{
									this.price = item.pt_price //价格赋值
								}
							} else if (this.goods_attr == 3) {
								this.price = item.ms_price //价格赋值
							}
							this.stock = item.stock //库存
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		onHide() {
			this.videoplay("pause")
		},
		methods: {
			openlocation() {
				let that = this
				uni.openLocation({
					latitude: Number(that.dataAll.shop.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(that.dataAll.shop.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: that.dataAll.shop.name, //即将传到高德或腾讯地图的店铺名称
					address: that.dataAll.shop.address_detail, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			jumpdetail(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			gowuche(){
				uni.switchTab({
					url:"/pages/gouwuche"
				})
			},
			gz_fn(id) { //关注/取消关注
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/shopcl/collectShop', 'GET', {
					shop_id: id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.shop.gz_num = this.dataAll.shop.is_gz ? Number(this.dataAll.shop.gz_num)-1 : Number(this.dataAll.shop.gz_num)+1
						this.dataAll.shop.is_gz = this.dataAll.shop.is_gz ? 0 : 1
						
					}
				})
			},
			tzlqyhq(id) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages_shouye/lingquyouhq?id=' + id
				})
			},
			getgoodsList(){
				httpRequest.request('/api/goodscl/goodsList', 'GET', {
					page:1,
					limit:100,
					shop_id:this.dataAll.shop_id,
					is_rec:2,
					goods_id: this.listid
				}).then(res => {
					this.goodsList = res.data.data
				})
			},
			contactkf(firend_id,type){
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/addFriends', 'GET', {
					firend_id,
					type
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: firend_id,
						friend_name: this.dataAll.shop.name,
						firend_avatar_text: this.dataAll.shop.logo_text
					}
					if(res.code==1){
						uni.navigateTo({
							url:"/pages_wode/chat?msg=" + encodeURIComponent(JSON.stringify(data))
						})
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			videoplay(index) {
				let _this = this;
				//全局变量changePlay表示正在切换。每次切换完播放等一秒在恢复，解决Android下的问题
				if (this.changePlay) {
					return
				}
				_this.changePlay = true
				let currentIndex = 'video' + index; // 获取当前视频索引
				console.log("playVideo currentIndex ", currentIndex)
				// 获取视频列表
				this.list.data.forEach((item, index) => { // 获取json对象并遍历, 停止非当前视频
					if (item.video_url_text) {
						let temp = 'video' + index;
						if (temp != currentIndex) { //判断名字是否一致
							// 暂停其余视频
							console.log(temp, currentIndex, '暂停播放');
							uni.createVideoContext(temp, _this).pause(); //暂停视频播放事件
						}
					}
			
				})
				setTimeout(() => {
					_this.changePlay = false
				}, 1000)
			},
			sc_fn(id) { //收藏/取消收藏
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/goodscl/goodsCollect', 'GET', {
					id: id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.is_collect = this.dataAll.is_collect?0:1
					}
				})
			},
			getptlist(){
				httpRequest.request('/api/goodscl/wanlshopGroupIndex', 'GET', {
					goods_id: this.listid
				}, false, false, false).then(res => {
					this.ptList = res.data
				})
			},
			ggclose() {
				if (this.dataAll.status == "hidden") {
					httpRequest.toast("当前商品已下架，暂时无法购买")
					return
				}
				if (!this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				this.show = false
				if (this.buy_type == 0) { //加入购物车
					this.addcar()
				} else {
					let data = {
						buy_type:this.dataAll.type,
						type: "detail", //detail=商品详情,cart=购物车
						ly: this.buy_type == 2?1:this.goods_attr, //1=普通,2=拼团,3=秒杀
						wanlshop_group_id: this.wanlshop_group_id, //参团id
						lists: [{
								shop_id: this.dataAll.shop_id,
								coupon_id: "",
								products: [{
									goods_id: this.listid,
									number: this.buynumber,
									sku_id: this.dataAll.specs == "single" ? this.dataAll.goodsprice.id :
										this.sku_id
								}]
							}]
					}
					uni.navigateTo({
						url: '/pages_shouye/querenddsw?msg=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			tzspxq(id,attr) {
				uni.navigateTo({
					url: '/pages_lianmengsc/shangpxq?id='+id+"&attr="+attr
				})
			},
			addcar() {
				httpRequest.request('/api/cart/addCart', 'POST', {
					shop_id:this.dataAll.shop_id,
					goods_id: this.listid,
					number: this.buynumber,
					sku_id: this.sku_id
				}).then(res => {
					httpRequest.toast(res.msg)
				})
			},
			buytype(value) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.price = this.dataAll.goodsprice.price
				this.buy_type = value
				this.show = true
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			getDetail() {
				httpRequest.request('/api/goodscl/goodsDetail', 'GET', {
					goods_id: this.listid
				}, false, false, false).then(res => {
					this.pageShow = true
					res.data.spu.forEach(current => {
						current.item = current.item.split(",")
						this.$set(current, "selecttext", "")
					})
					this.$set(res.data,"list1",[])
					res.data.list1 = res.data.images_text
					if(res.data.video_url_text){
						res.data.list1.unshift(res.data.video_url_text)
					}
					res.data.content = res.data.content?res.data.content.replace(/\<img/gi,'<img style="display:block" '):"";
					res.data.buy_xz = res.data.buy_xz?res.data.buy_xz.replace(/\<img/gi,'<img style="display:block" '):""
					this.dataAll = res.data
					this.getgoodsList()
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goodscl/goodsComment', 'GET', {
					page: page || 1,
					limit: 12,
					goods_id: this.listid,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 海报
			hbclose() {
				this.hbshow = false
			},
			checked(index) {
				this.isActive = index
			},
			jumper(url,val) {
				uni.navigateTo({
					url: url+val
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.lalalbox .uicon-star{
		font-size: 15rpx !important;
	}
	.shangjiatuijian{
		padding: 15rpx 30rpx;
		margin-top: 10rpx;
		background-color: #f6f6f6;
		.sanshis{
			width: 33.33%;
			image{
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
	.hongbox{
		border: 3rpx solid #ff0000;
		border-radius: 30rpx;
		background-color: #fbecec;
	}
	.huibox {
		background: #F5F5F5;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}
	.scyyzz {
		width: 100%;
		height: 291rpx;
	}
	
	.tpbox {
		width: 33.33%;
		margin-top: 30rpx;
	}
	
	.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;
	
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}
	.ptbox {
		background-size: 100% 100%;
		padding: 16rpx 120rpx 16rpx 110rpx;
		background-image: url('@/static/images/system/Group 1572.png');
	}

	.xiahuaxian:last-child {
		padding-bottom: 0;
		border: none;
	}

	.xhtbn {
		width: 140rpx;
		height: 55rpx;
		background-color: #FFf;
		border: 2rpx solid #FF9341;
		border-radius: 120rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.touxiag {
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;

	}

	.touxiags{
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;
	}

	.baocbtn {
		width: 300rpx;
		height: 66rpx;
		background: #FF9341;
		border-radius: 102rpx 102rpx 102rpx 102rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.quxiaobtn {
		width: 300rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 102rpx 102rpx 102rpx 102rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.spxqicon{
		width: 50rpx;
		height: 50rpx;
	}

	/deep/.u-popup__content {
		background-color: rgba(0, 0, 0, .01) !important;
	}

	.tupian {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.touxiang {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
	}

	.wxbtn {
		width: 147rpx;
		height: 53rpx;
		background: #F5F5F5;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border: 2rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yxbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 147rpx;
		height: 53rpx;
		background: rgba(255, 147, 65, 0.1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border: 2rpx solid #FF9341;
	}

	.biejt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.shuz {
		position: absolute;
		top: -10rpx;
		right: -30rpx;
		font-size: 20rpx;
		font-family: DIN, DIN;
		font-weight: bold;
		color: #FFFFFF;
		width: 36rpx;
		height: 36rpx;
		background: #FA4C31;
		border-radius: 50rpx;
	}

	.gwbox {
		position: fixed;
		top: 56%;
		right: 30rpx;
		box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 50%;
		background-color: #fff;
		width: 94rpx;
		height: 94rpx;
	}

	.lbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #f6373a;
		width: 208rpx;
		border-radius: 45rpx;
	}

	.jrbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #FFB801;
		width: 208rpx;
		border-radius: 45rpx;
	}

	.tab_nav {
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 76rpx;
		line-height: 76rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 39rpx;
		height: 4rpx;
		background: #FFB800;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		background-size: 100% 100%;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
.fxbtn {
		width: 150rpx;
		height: 70rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		border: 1rpx solid #FF9341;
		color: #FF9341;
		border-radius: 16rpx;
	}
	.huangbox {
		background-color: #fff5ec;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.fenbox {
		background-color: #fff0ef;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FB605C;
	}
</style>